<template>
    <div>
      <el-dialog
        title="题目bug反馈，感谢您的参与！"
        v-model="state.visible"
        width="850px"
      >
        <div class="dialogContent">
            <div class="jiaodui">          
                <div>【题】
                    <div v-html="state.question.content_front" class="line-break"></div>
                </div>
                <el-image v-for="url in state.question.images" :key="url" :src="url" style="width: 150px;height: 100px;" /> 
                <div>【答案】
                    <div v-html="state.question.answer_front" class="line-break"></div>
                </div>
                <span>【解析】
                    <div v-html="state.question.explain_front" class="line-break"></div>
                </span>
                <el-image v-for="url in state.question.images_explain" :key="url" :src="url" style="width: 150px;height: 100px;" /> 
                <p>【题型】{{ state.question.type_cn }}</p>
                <span>【难度】</span>
                <el-rate v-model="state.question.difficulty_level" disabled/>            
            </div>      
            <el-form :model="state.feedback" :rules="state.rules" ref="feedbackRef" label-width="100px" class="questionForm">

              <el-form-item label="反馈内容：" prop="content">
                  <el-input
                      v-model="state.feedback.content"
                      :autosize="{ minRows: 3, maxRows: 30 }"
                      type="textarea"                      
                      />
              </el-form-item>
            </el-form>
            
        </div>
        <template #footer>
          <div class="dialog-footer">
            <el-button type="warning" @click="submitClick()">提交</el-button>
            <el-button type="primary" @click="state.visible = false">取消</el-button>    
          </div>
        </template>
      </el-dialog>
    </div>
  </template>
    
  <script setup>  
    import { reactive, ref, toRefs, onMounted, onBeforeUnmount, onBeforeMount, computed } from 'vue'
    import { localGet, uploadImgServer} from '@/utils'
    import { Delete, Plus, ZoomIn } from '@element-plus/icons-vue'
    import { ElMessage } from 'element-plus'
    import axios from '@/utils/axios' 

    const fileList = ref(null)
    const feedbackRef = ref(null)
    const uploadQuestionPicturesRef = ref(null)
    const questionPicturesList = ref([])
    const dialogImageUrl = ref('')
    const dialogVisible = ref(false)
    const disabled = ref(false)
    const props = defineProps({
      question: Object,
    });
    onMounted(() => {  
      state.question = props.question
    })
    const images = computed(()=>{      
      return function(pictures){
        if(pictures){
          return pictures.split("-")
        }else{
          return Array()
        }      
      }
    })
    const uploadFileRef = ref(null)    
    const state = reactive({
      visible: false,     //控制本组件的对话框显示和隐藏
      rules: { // 规则
        content: [
          {required: 'true', message: '请填写题目内容', trigger: ['change']}
        ],  
      },
      token: localGet('token') || '', // 存在本地的 token
      uploadImgServer,
      question: Object,
      feedback: {
        content: "请输入反馈内容",
        question: Number,
      },
    });
    // 保存修改
    const submitClick=()=>{
        feedbackRef.value.validate((vaild, obj) => {
        if (vaild) {
          console.log("表单验证成功，我要发送帮助反馈啦：")        
          // 持久化到数据库中,发给后端         
          let params = {            
            content: state.feedback.content,
            question: state.question.id,
          }     
          axios.post(`/QuestionFeedbackViewSet/`,params).then(res =>{
            if (res.code == 200){
              ElMessage.success("恭喜你，反馈成功啦，感谢您的反馈")
            }else{
              ElMessage.error("很遗憾，反馈失败！")
              console.log("反馈失败：", data.message)
            }
          }) 
          state.visible = false
        }else{
          ElMessage.error("表单没有完成！")
          console.log("表单没有通过！",obj)       
          for (let key in obj) {
            console.log("具体原因：", obj[key][0].message)
            return false;
          }
        }
      })
    }
    
    // 显示本对话框，并且将内容中\n转换<br>
    const open = ( question) => {
      state.question = question
      state.visible = true
    };
    // 关闭弹窗
    const close = () => {
      state.visible = false
    };
  
    //题目插图上传成功（待修改）
    const handleQuestionPictureUploadSuccess=(response)=>{
      if(response.code==200){
        question.images.push(response.data)
        if(question.pictures ==""){
          question.pictures = response.data          
        }else{
          question.pictures += "-" + response.data
        }        
      }else{
        ElMessage('上传图片错误！')
      }
    }
  
    // 将需要暴露出去的数据与方法都可以暴露出去
    defineExpose({ open, close })
  </script>
  
  <style scoped>
    .dialogContent{
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: left;
    }
    .questionForm{
      width: 800px;
      border-width: 1px;
      border-color: black;
      border-style: solid;
      border-radius: 3px;
    }
    .dialog-footer{
      display: flex;
      justify-content: center;
    } 
    .line-break{
      white-space: pre-wrap;
    }
    .inlineImage{
      display: inline;
      width:  150px;
      height: 100px;
    }
   
  </style>